---
# title: "Font Weight"
title: "字体粗细"
# description: "Utilities for controlling the font weight of an element."
description: "用来控制字体粗细的功能类"
features:
  responsive: true
  customizable: true
  hover: true
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/fontWeight'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## 使用方法

<!-- Control the font weight of an element using the `font-{weight}` utilities. -->
使用 `font-{weight}` 功能类来控制元素字体粗细。

```html lightBlue
<template preview>
  <dl class="text-light-blue-600 space-y-6">
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">thin</dt>
      <dd class="text-xl font-thin">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">extralight</dt>
      <dd class="text-xl font-extralight">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">light</dt>
      <dd class="text-xl font-light">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">normal</dt>
      <dd class="text-xl font-normal">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">medium</dt>
      <dd class="text-xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">semibold</dt>
      <dd class="text-xl font-semibold">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">bold</dt>
      <dd class="text-xl font-bold">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">extrabold</dt>
      <dd class="text-xl font-extrabold">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="flex items-start">
      <dt class="w-32 text-right pr-6 flex-shrink-0 text-sm text-light-blue-600 text-opacity-50 font-mono leading-7">black</dt>
      <dd class="text-xl font-black">The quick brown fox jumped over the lazy dog.</dd>
    </div>
  </dl> 
</template>

<p class="**font-thin** ...">The quick brown fox ...</p>
<p class="**font-extralight** ...">The quick brown fox ...</p>
<p class="**font-light** ...">The quick brown fox ...</p>
<p class="**font-normal** ...">The quick brown fox ...</p>
<p class="**font-medium** ...">The quick brown fox ...</p>
<p class="**font-semibold** ...">The quick brown fox ...</p>
<p class="**font-bold** ...">The quick brown fox ...</p>
<p class="**font-extrabold** ...">The quick brown fox ...</p>
<p class="**font-black** ...">The quick brown fox ...</p>
```

## 响应式

<!-- To control the font weight of an element at a specific breakpoint, add a `{screen}:` prefix to any existing font weight utility. For example, use `md:font-bold` to apply the `font-bold` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的字体粗细，请在任何现有的字体粗细功能类前添加 `{screen}:` 前缀。例如，使用 `md:font-bold` 来仅在中等大小及以上的屏幕应用 `font-bold` 功能类。

```html
<p class="font-normal **md:font-bold** ...">The quick brown fox jumped over the lazy dog.</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Font Weights

<!-- By default Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config. -->
默认情况下，Tailwind 提供了10个 `font-weight` 功能类。您可以通过编辑您的 Tailwind 配置中的 `theme.fontWeight` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      fontWeight: {
-       hairline: 100,
+       'extra-light': 100,
-       thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
-       semibold: 600,
        bold: 700,
-       extrabold: 800,
+       'extra-bold': 800,
        black: 900,
      }
    }
  }
```

### 变体

<Variants plugin="fontWeight" />

### 禁用

<Disabling plugin="fontWeight" />
